<template>
	<div class="picture">
		<div class="pocition" v-show="imgshow" @click="showimg"	>
			
		</div>
		<div class="picture-top" @click="showimg">
			<img class="showimg" src="//img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_600x330_e8437d6f.jpg" alt="">
			<div class="picture-bottom">
			<em class="picture-amount">48</em>
			<p class="picture-name">秦始皇陵博物院（兵马俑）(AAAAA景区)</p>
			</div>
		</div>
		<div class="flexbox">
			<div class="flexbox-left">
				<div class="flexbox-left-top">
					<span class="picture-score">4.9</span><span class="picture-text">分</span><span class="picture-desc">很棒</span>
				</div>
				<div class="flexbox-left-bottom">
					<span class="picture-comment">13156条评论</span>
					<span class="picture-strategy">85条攻略</span>
				</div>
				<span class="iconfont iconarrow-right-copy-copy positionicon"></span>
			</div>
			<div class="flexbox-right">
				<div class="flexbox-right-top">
					<span class="picture-title">景点简介</span>
				</div>
				<div class="flexbox-right-bottom">
					<span class="picture-time">开放时间、贴士</span>
				</div>
				<span class="iconfont iconarrow-right-copy-copy positionicon"></span>
			</div>
		</div>
		<div class="picture-site">
			<span class="iconfont icondingwei"></span>
			<span>陕西省西安市临潼县秦始皇陵东1.5公里处</span>
			<span class="iconfont iconarrow-right-copy-copy positionicon1"></span>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				imgshow:false
			}
		},
		methods:{
			showimg(){
				this.imgshow = !this.imgshow
			}
		}
	}
</script>
<style scoped>
	.pocition{
		position: fixed;
		top:0;
		left:0;
		bottom: 0;
		right: 0;
		background-color: #000;
		z-index: 99999999;
	}
	.showimg{
		width: 100%;
	}
	.picture-top{
		position: relative;
	}
	.picture-amount{
		font-size: .24rem;
	    color: #fff;
	    line-height: .4rem;
	    text-align: center;
	    margin-left: .1rem;
	}
	.picture-bottom{
		position: absolute;
		right: .2rem;
	    bottom: .36rem;
	    left: .2rem;
	}
	.picture-name{
	    z-index: 1;
	    line-height: .4rem;
	    color: #fff;
	    font-size: .36rem;
	    text-shadow: 0 1px 2px rgba(0,0,0,0.70);
	}
	.picture-score{
		font-size: .44rem;
	    color: #ff8300;
	    line-height: .44rem;
	}
	.picture-text{
		font-size: .28rem;
	    color: #ff8300;
	    line-height: .48rem;
	}
	.picture-desc{
		font-size: .28rem;
	    color: #ff8300;
	    line-height: .48rem;
	    margin-left: .2rem;
	}
	.flexbox{
		display: flex;
		position: relative;
	    top: -.2rem;
	    padding: .1rem .2rem .1rem .2rem;
	    background: #fff;
	    line-height: 0;
	    border-radius: .1rem .1rem 0 0;
		border-bottom: 1px solid #f0f0ef;
	}
	.flexbox-left{
		width: 50%;
		position: relative;
		border-right: 1px solid #e0e0e0;
	}
	.flexbox-left-bottom{
		font-size: .24rem;
	    color: #9e9e9e;
	    line-height: .32rem;
	    margin-right: .2rem;
	}
	.flexbox-right{
		width: 50%;
		position: relative;
	}
	.flexbox-right-bottom{
		font-size: .24rem;
	    color: #9e9e9e;
	    line-height: .32rem;
	    margin-right: .2rem;
	}
	.picture-title{
	    font-size: .28rem;
	    color: #212121;
	    line-height: .48rem;
	    padding-left: .3rem;
	}
	.picture-time{
	    padding-left: .3rem;
	}
	.positionicon{
		position: absolute;
		top:50%;
		right:-.08rem;
	}
	.positionicon1{
		position: absolute;
		top:25%;
		right:.1rem;
	}
	.picture-site{
		padding-right: .56rem;
	    position: relative;
	    top: -.2rem;
	    font-size: .28em;
	    line-height: .36rem;
    	color: #212121;
		background-color: #fff;
		padding:.2rem 0 .2rem .56rem;
	}
</style>